<template>
  <div class="login-page center row-center" v-loading="loading">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="70px" class="demo-ruleForm" v-if="JSON.stringify($store.state.User.userInfo) === '{}'">
      <el-form-item label="手机号" prop="username">
        <el-input v-model.number="ruleForm.username" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="ruleForm.password" type="password" placeholder="请输入密码"  @keyup.enter.native="submitForm('ruleForm')"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')" style="width:100%;margin-top:20px;">登录</el-button>
      </el-form-item>
    </el-form>
    <div v-else>
      <div class="item">
        <label>姓名:</label>
        <span>{{userInfo.realname}}</span>
      </div>
      <div class="item">
        <label>手机号:</label>
        <span>{{userInfo.phone}}</span>
      </div>
      <div class="item">
        <label>创建时间:</label>
        <span>{{formatTime(userInfo.createTime)}}</span>
      </div>
      <div class="item">
        <label>最后登录时间:</label>
        <span>{{formatTime(userInfo.updateTime)}}</span>
      </div>
      <div class="item">
        <label>最后登录IP地址:</label>
        <span>{{userInfo.ip}}</span>
      </div>
      <div class="item">
        <label>当前IP:</label>
        <span v-if="ipInfo.cip === undefined" style="color:red;">网络未连接</span>
        <span v-else>{{ipInfo.cip+"("+ipInfo.cname+")"}}</span>
      </div>
      <div class="row-center">
        <el-button type="danger" size="mini" @click="logout">退出登录</el-button>
        <el-button type="primary" size="mini" @click="resetPass">修改密码</el-button>
      </div>
    </div>

    <el-dialog title="重置密码" :visible.sync="resetFormShow" width="30%">
      <el-form :model="resetForm" :rules="rules" ref="resetForm">
        <el-form-item label="新密码" label-width="70px" prop="password">
          <el-input v-model="resetForm.password" type="password" autocomplete="off" size="small"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetFormShow = false" size="small">取 消</el-button>
        <el-button type="primary" @click="submitResetPass" size="small">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import getMD5 from '../../utils/md5';
  import {getTime} from '../../utils/utils';
  import Bus from '../../utils/bus';
  export default {
    data() {
      return {
        ipInfo:{
          cip:undefined,
          cname:undefined
        },
        ruleForm: {
          username:'',
          password:''
        },
        loading:false,
        rules: {
          username: [
            { required: true, message: '请输入手机号', trigger: 'blur' },
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
          ]
        },
        resetFormShow:false,
        resetForm:{
          password:""
        }
      };
    },
    computed:{
      userInfo(){
        return this.$store.state.User.userInfo;
      }
    },
    mounted(){
      if(window.returnCitySN!==undefined)
        this.ipInfo = window.returnCitySN;
    },
    methods: {
      duankai(){
        this.$lhttp.get('/duankai').then(res=>{
            this.$message({
              message:'已断开连接',
              type:'success',
              showClose:true
            });
            Bus.$emit('duankai');
          })
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let {username,password} = this.ruleForm;
            password = getMD5(password);
            let data = {
              username,
              password
            };
            this.loading = true;
            this.$http.post('/user/login',data).then(res=>{
              localStorage.setItem("token",res.data.access_token);
              this.$message({
                message:res.msg,
                type:"success",
                showClose:true
              });
              this.loading = false;
              this.$http.get('/user/info').then(res=>{
                this.$store.dispatch('setUserInfo',res.data);
              })
            }).catch(()=>{
              this.loading = false;
            })
          } else {
            return false;
          }
        });
      },
      formatTime(time){
        return getTime(time);
      },
      logout(){
        this.$confirm('确认退出登录？')
          .then(_ => {
            localStorage.setItem("token","");
            this.$store.dispatch('setUserInfo',{});
            this.$message({
              message:'注销成功',
              type:'success',
              showClose:true
            });
            // this.duankai();
          })
          .catch(_ => {});
      },
      resetPass(){
        this.resetFormShow = true;
      },
      submitResetPass(){
        this.$refs["resetForm"].validate((valid) => {
          if(valid){
            let {password} = this.resetForm;
            password = getMD5(password);
            let params = {
              password
            }
            this.$http.get('/user/editpass',params).then(res=>{
              this.$message({
                message:"修改密码成功",
                type:"success",
                showClose:true
              });
              this.resetFormShow = false;
              this.resetForm.password = "";
            })
          }
        })
        
      }
    }
  }
</script>

<style lang="scss" scoped>
  .login-page{
    height:100%;
    width:100%;
    .item{
      font-size:1.1rem;
      margin-bottom:1rem;
    }
  }
</style>